<template>
	<div>
		<Header />
		<div>
			<div style="position: relative;">
				<img style="width: 100%;height: auto;" src="@/assets/images/industryNews10.jpg">
				<div style="position: absolute;bottom: 5px;left: 0;background-color: rgba(0, 0, 0, 0.2);width: 100%;">
					<div class="indexContainer mobileFontSize12"
						style="display: flex;align-items: center;font-size: 16px;color: #fff;padding: 10px 0;flex-wrap: wrap;">
						<img style="width: 12px; height: 15px;object-fit:cover;"
							src="@/assets/images/industryNews30.png" />
						<span style="padding-left:5px;">当前位置：</span>
						<span>首页</span>
						<span style="padding: 0 5px;">></span>
						<span>行业资讯</span>
						<span style="padding: 0 5px;">></span>
						<span>{{menuIndex==0?'平台':menuIndex==1?'机构':'专家'}}资讯</span>
						<span style="padding: 0 5px;">></span>
						<span>资讯详情</span>
					</div>
				</div>
			</div>

			<div class="indexContainer">
				<div
					style="display: flex;align-items: center;justify-content: center;padding: 30px 0;flex-direction: column;">
					<div style="width: 100%;padding: 20px 0;">
						<div style="padding: 30px;background-color: #f4f4f4;" class="mobilePadding">
							<div style="background-color: #fff;padding: 50px;" class="mobilePadding">
								<div style="text-align: center;">
									<h2 style="color: #333;font-size: 28px;">{{info.name}}</h2>
								</div>

								<div style="text-align: center;font-size: 16px;margin-top: 30px;">
									<span style="color: #333;">发布人：{{info.releaseUser}}</span>
									<span style="color: #333;margin-left: 15px;">发布时间：{{info.createTime}}</span>
									<span style="color: #333;margin-left: 15px;">来源：</span>
									<span
										style="color: #409eff;text-decoration: underline;cursor: pointer;">{{info.zxSource}}</span>
								</div>

								<div
									style="border-top: 1px dashed #ccc;border-bottom: 1px dashed #ccc;margin: 20px 0;padding: 30px;display: flex;flex-direction: column;align-items: center;">
									<p v-html="info.content"></p>
									<!-- <el-row>
										<el-col :offset="6" :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
											<img style="width: 100%;height: auto;margin-top: 30px;object-fit:cover;"
											    src="@/assets/images/industryNews11.png" >
										</el-col>
									</el-row> -->
								</div>

								<div v-if="info.fileDtos&&info.fileDtos.length!=0" style="font-size: 20px;"
									class="mobileFontSize14">
									<div>附件：</div>
									<div v-for="(item,index) in info.fileDtos"
										style="text-decoration: underline;color: #409eff;cursor: pointer;"
										@click="handleFile(index)">
										{{item.name}}
									</div>
								</div>
							</div>
						</div>

						<div style="display: flex;align-items: center;justify-content: flex-end;margin: 20px 0;">
							<!-- <img style="width: 210px;height: 65px;cursor: pointer;object-fit:cover;" class="mobileCommentBtn"
								src="@/assets/images/industryNews12.png"  @click="handleComment"> -->
							<!-- <el-button class="themeGradientColor" type="primary"
							    @click.stop="handleOnline(resourceInfo.id, resourceInfo.releaseUser, resourceInfo.createBy)">我要评论</el-button> -->
						</div>

						<div style="padding: 30px;background-color: #f4f4f4;" class="mobilePadding" v-loading="loading">
							<div style="background-color: #fff;padding: 0 50px;" class="mobilePadding">
								<div style="padding: 30px 8px 15px 0;margin-left: 15px;">
									<div style="display: flex;">
										<div style="position: relative;">
											<img v-if="!userInfo.avatar || userInfo.avatar.length==0"
												style="width: 50px;height: 50px;margin-right: 15px;object-fit:cover;"
												src="@/assets/images/industryNews15.png">
											<img v-else
												style="width: 50px;height: 50px;margin-right: 15px;object-fit:cover;border-radius: 50px;"
												:src="userInfo.avatar">
										</div>

										<div
											style="width: 100%;padding: 10px;background-color: #f1f1f1;border-radius: 8px;">
											<div>
												<el-input type="textarea" :rows="5" placeholder="请输入评论内容"
													v-model="textarea">
												</el-input>
											</div>
											<div style="text-align: right;margin-top: 15px;">
												<el-button class="themeGradientColor" type="primary"
													@click.stop="handleSendComment">发 表</el-button>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div style="background-color: #fff;padding: 50px;" class="mobilePadding">
								<div
									style="display: flex;align-items: center;justify-content: space-between;padding-bottom: 15px;border-bottom: 1px solid #ccc;">
									<div style="font-size: 20px;" class="mobileFontSize14">
										<span style="color: #2468f2;margin-right: 2px;">{{total}}</span>
										<span>条评论</span>
									</div>

									<div style="font-size: 20px;cursor: pointer;" @click="handleSort"
										class="mobileFontSize14">
										<span style="margin-right: 5px;">评论排序</span>
										<img v-if="sort" style="width: 10px;height: 14px;object-fit:cover;"
											src="@/assets/images/industryNews13.png">
										<img v-else style="width: 10px;height: 14px;object-fit:cover;"
											src="@/assets/images/industryNews14.png">
									</div>
								</div>

								<div v-for="(item, index) in listData"
									style="padding: 30px 8px 15px 0;margin-left: 15px;border-bottom: 1px dashed #ccc;">
									<div style="display: flex;align-items: center;justify-content: space-between;">
										<div style="display: flex;align-items: center;position: relative;">

											<img v-if="!item.commentHead || item.commentHead.length==0"
												style="width: 50px;height: 50px;margin-right: 15px;object-fit:cover;"
												src="@/assets/images/industryNews15.png">
											<img v-else
												style="width: 50px;height: 50px;margin-right: 15px;object-fit:cover;border-radius: 50px;"
												:src="item.commentHead">
											<img v-if="item.userDto&&item.userDto.staffType&&item.userDto.staffType=='17'"
												style="position: absolute;bottom: 0;left: 40px;width: 15px;height: 15px;"
												src="@/assets/images/industryNews48.png">
											<span style="font-size: 20px;font-weight: 600;color: #333;"
												class="mobileFontSize14">{{item.commentName}}</span>
										</div>
										<div>
											<i v-if="userInfo.id==item.createBy" class="el-icon-delete"
												style="cursor: pointer;" @click="handleDeleteComment(item.id)"></i>
										</div>
									</div>


									<div style="font-size: 20px;color: #555;line-height: 35px;margin-top: 12px;"
										class="mobileFontSize14">{{item.commentContent}}</div>

									<div style="font-size: 18px;color: #999;" class="mobileFontSize14">
										<span>{{item.createTime}}</span>
										<span style="margin-left: 15px;">IP属地：{{item.place}} </span>
									</div>
								</div>

								<div style="text-align: center;margin-top: 40px;" v-if="loadLoading">
									Loading...
									<!-- <el-pagination background layout="prev, pager, next" :total="total" :page-size="10"
										:pager-count="5" @current-change="handleCurrentChange">
									</el-pagination> -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<Footer />
		<industryCommentDialog ref="industryCommentDialog" @reloadData="getList"></industryCommentDialog>
	</div>
</template>
<script>
	import Header from "@/components/home/header/header";
	import Footer from "@/components/home/footer/footer";
	import industryCommentDialog from "./industryCommentDialog";
	import {
		industryNewListDetail,
		industryNewCommentList,
		industryNewCommentDelete,
		industryNewCommentAdd
	} from "@/request/api/industryNew";
	export default {
		components: {
			Header,
			Footer,
			industryCommentDialog
		},
		data() {
			return {
				info: {},
				sort: true,
				loading: false,
				page: 1,
				total: 0,
				listData: [],
				userInfo: {},



				textarea: "",
				loadLoading: false, //是否加载
			}
		},
		created() {
			if (window.sessionStorage.getItem("userInfo") !== null) {
				this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
				// console.log('this.userInfo',this.userInfo)
			}
			this.menuIndex = this.$route.query.menuIndex
			this.getDetail()
		},
		mounted() {
			//console.log('mounted')
			this.$nextTick(() => { //页面内容渲染完成后再监听scroll事件
				window.addEventListener('scroll', this.getScroll, false)
			})
		},
		methods: {
			getDetail() {
				industryNewListDetail(this.$route.query.id).then((res) => {
					// console.log('res',res)
					if (res.data.code == 200) {
						this.info = res.data.result

						document.querySelector('meta[name="keywords"]').setAttribute('content', res.data.result
							.keyword)
						document.querySelector('meta[name="description"]').setAttribute('content', res.data.result
							.description)
						document.title = res.data.result.name

						this.getList()
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 点击分页
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			},
			// 排序
			handleSort() {
				this.sort = !this.sort
				this.getList()
			},
			// 获取评论列表
			getList() {
				this.listData = []
				this.loading = true
				let params = {
					informationId: this.$route.query.id,
					page: this.page,
					pageSize: 10,
					ordered: this.sort == true ? 'asc' : ''
				}
				industryNewCommentList(params).then((res) => {
					// console.log('res',res)
					this.loading = false
					if (res.data.code == 200) {
						this.listData = res.data.result.items
						this.total = res.data.result.total
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					this.loading = false
					console.log('err', err)
				})
			},
			// 滚动
			getScroll() {
				const that = this
				let clientHeight = document.documentElement.clientHeight; //可视区域
				let scrollHeight = document.body.scrollHeight; // 滚动文档高度
				let scrollTop = parseInt(document.documentElement.scrollTop); // 已滚动的高度
				if (scrollTop > scrollHeight - 2 * clientHeight) { //针对滚动事件触发后，不断的加载页面内容
					that.loadData() //获取新的列表内容
				}
			},
			// 加载数据
			loadData() {
				// 如果正在加载数据，则直接返回
				if (this.loadLoading) {
					return;
				}
				if (this.listData.length % 10 != 0 || this.listData.length == this.total) {
					return
				}

				this.loadLoading = true;
				this.page++
				let params = {
					informationId: this.$route.query.id,
					page: this.page,
					pageSize: 10,
					ordered: this.sort == true ? 'asc' : ''
				}
				industryNewCommentList(params).then((res) => {
					// console.log('res',res)
					this.loadLoading = false
					if (res.data.code == 200) {
						let list = res.data.result.items
						let orginList = JSON.parse(JSON.stringify(this.listData))
						this.listData = orginList.concat(list)
						this.total = res.data.result.total
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					this.loadLoading = false
					console.log('err', err)
				})
			},
			// 我要评论
			handleComment() {
				if (window.sessionStorage.getItem("userInfo") === null) {
					this.$message({
						message: '请先登录',
						type: "warning",
					});
					return
				}
				if (this.userInfo.iuiCertification == 0) {
					this.$message({
						message: '请先实名认证',
						type: "warning",
					});
					return
				}
				this.$refs.industryCommentDialog.open(this.info.id)
			},
			// 删除评论
			handleDeleteComment(id) {
				this.$confirm('确定删除此评论吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					industryNewCommentDelete(id).then((res) => {
						// console.log('res',res)
						if (res.data.code == 200) {
							this.$message({
								message: res.data.message,
								type: "success",
							});
							setTimeout(() => {
								this.getList()
							}, 1000)
						} else {
							this.$message({
								message: res.data.message,
								type: "warning",
							});
						}
					}).catch((err) => {
						this.loading = false
						console.log('err', err)
					})
				}).catch(() => {});
			},
			// 点击附件
			handleFile(index) {
				let filePath = this.info.fileDtos[index].filePath
				window.open(filePath, '_blank')
			},
			// 发表
			handleSendComment() {
				if (window.sessionStorage.getItem("userInfo") === null) {
					this.$message({
						message: '请先登录',
						type: "warning",
					});
					return
				}
				if (this.userInfo.iuiCertification == 0) {
					this.$message({
						message: '请先实名认证',
						type: "warning",
					});
					return
				}
				if (this.textarea == '') {
					return
				}
				let data = {
					informationId: this.info.id,
					commentContent: this.textarea
				}
				industryNewCommentAdd(data).then((res) => {
					// console.log('res',res)
					if (res.data.code == 200) {
						this.textarea = ''
						this.$message({
							message: res.data.message,
							type: "success",
						});
						setTimeout(() => {
							this.getList()
						}, 1000)
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					console.log('err', err)
					this.loading = false
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobilePadding {
			padding: 10px !important;
		}

		.mobileCommentBtn {
			width: 100px !important;
			height: 31px !important;
		}

		.mobileFontSize14 {
			font-size: 14px !important;
		}
	}

	/deep/.el-pagination.is-background .btn-prev {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .btn-next {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
		background: linear-gradient(to bottom right, #266af2, #76a0f5);
	}

	/deep/.el-textarea__inner {
		border: 0;
		background-color: #f1f1f1;
	}

	/deep/.el-textarea input::-webkit-input-placeholder {
		color: #3B9DF8;
	}
</style>